<template>
    <div class="flexbox flexcolumn height_100 com_box flexjust flexcenter">
        <AddAdverList ref="adverRef" @getAdverData="getAdverData" @getUserData="getUserData" />
        <AddRulesList ref="rulesRef" @getRulesData="getRulesData" />
        <AddTriggerRules ref="triggerRef" @getTriggerData="getTriggerData" />
        <ViewStrategy ref="viewRef" />
        <OccupyPlan ref="occRef" />
        <OccupyUser ref="occuserRef" />
        <div class="str_step flexbox flexcenter">
            <div class="step_box">
                <div class="step_header flexbox flexbetween flexcenter">
                    <span class="step_num">1</span>
                    <span class="step_status gray" v-if="!viewForm.is_adver">待设置</span>
                    <span class="step_status green" v-else>已完成</span>
                </div>
                <div class="step_content">
                    <p class="step_text">添加【广告组】/【广告账号】</p>
                    <p class="step_tips">「自动投放操作」将应用到已选择广告组上</p>
                    <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.is_adver" @click="addAdverList">去添加</el-button>
                    <el-button type="primary" plain size="mini" class="step_btn" v-else @click="addAdverList">修改</el-button>
                </div>
            </div>
            <svg class="step_icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="14.6663" cy="14.5" r="10.2" stroke="#616C85" stroke-width="2" />
                <path d="M14.6665 10.2998L14.6665 18.6998" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M10.4663 14.5L18.8663 14.5" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <div class="step_box">
                <div class="step_header flexbox flexbetween flexcenter">
                    <span class="step_num">2</span>
                    <span class="step_status gray" v-if="!viewForm.is_rules">待设置</span>
                    <span class="step_status green" v-else>已完成</span>
                </div>
                <div class="step_content">
                    <p class="step_text">添加【规则组】</p>
                    <p class="step_tips">满足条件将执行自动投放操作</p>
                    <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.is_rules" @click="addRulesList">去添加</el-button>
                    <el-button type="primary" plain size="mini" class="step_btn" v-else @click="addRulesList">修改</el-button>
                </div>
            </div>
            <svg class="step_icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="14.6663" cy="14.5" r="10.2" stroke="#616C85" stroke-width="2" />
                <path d="M14.6665 10.2998L14.6665 18.6998" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M10.4663 14.5L18.8663 14.5" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <div class="step_box">
                <div class="step_header flexbox flexbetween flexcenter">
                    <span class="step_num">3</span>
                    <span class="step_status gray" v-if="!viewForm.is_trigger">待设置</span>
                    <span class="step_status green" v-else>已完成</span>
                </div>
                <div class="step_content">
                    <p class="step_text">添加【规则组触发规则】</p>
                    <p class="step_tips">满足条件将触发规则组</p>
                    <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.is_trigger" :disabled="!viewForm.is_rules" @click="addTriggerRules">去添加</el-button>
                    <el-button type="primary" plain size="mini" class="step_btn" v-else :disabled="!viewForm.is_rules" @click="addTriggerRules">修改</el-button>
                </div>
            </div>
        </div>
        <div class="str_btn flexbox flexcolumn flexcenter">
            <el-form label-position='top' label-width="90px" :model="submitDataForm" :hide-required-asterisk='true' ref="submitDataForm">
                <el-form-item label="" prop="name" :rules="[{required: true,message: '请输入',trigger: ['blur', 'change']}]" style="margin-bottom:0">
                    <el-input maxlength="20" v-model="submitDataForm.name" placeholder="设置策略名称，最多20个字符" style="width:340px;" class="str_input"></el-input>
                </el-form-item>
                <el-form-item label="" prop="segmentation_type" :rules="[{required: true,message: '请选择',trigger: ['blur', 'change']}]" style="margin-bottom:0">
                     <el-select v-model="submitDataForm.segmentation_type" placeholder="请选择" style="width:340px;" class="str_input">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button plain class="plain_blue str_button" @click="viewStrategy">预览</el-button>
            <el-button type="primary" class="str_button" @click="submitForm('submitDataForm')" :disabled="loading" :loading="loading">保存设置</el-button>
        </div>
    </div>
</template>

<script>
import AddAdverList from "./AddAdverList";
import AddRulesList from "./AddRulesList";
import AddTriggerRules from "./AddTriggerRules";
import ViewStrategy from "./ViewStrategy";
import OccupyPlan from "./OccupyPlan";
import OccupyUser from "./OccupyUser";
export default {
    name: "",
    data() {
        return {
            options: [{
                value: '1',
                label: '每 10 分钟执行一次'
                }, {
                value: '3',
                label: '每 30 分钟执行一次'
            }],
            loading:false,
            viewForm: {
                is_adver: false,
                adverData: [],
                userData:[],
                is_rules: false,
                rulesDta: [],
                is_trigger: false,
                triggerData: {
                    condition: [
                        {
                            roi_type:"0",
                            roi_left: "",
                            roi_right: "",
                        },
                    ],
                    operation: [
                        {
                            condition: "",
                            speed_left: "",
                            speed_right: "",
                            group_left: "",
                            group_middle: "",
                            group_right: "",
                        },
                    ],
                },
            },
            submitDataForm: {
                campaign_group_id: [],
                rule_group_id: [],
                advertiser_id:[],
                use_rule: {
                    condition: [
                        {
                            roi_left: "",
                            roi_right: "",
                        },
                    ],
                    operation: [
                        {
                            condition: "",
                            speed_left: "",
                            speed_right: "",
                            group_left: "",
                            group_middle: "",
                            group_right: "",
                        },
                    ],
                },
                segmentation_type:"1",
                name: "",
            },
            addStrategyRules: {
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        let aobj = JSON.parse(
            window.sessionStorage.getItem("strategySesstion")
        );
        if (aobj) {
            this.viewForm = aobj;
        }
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("strategySesstion");
    },
    methods: {
        // 添加广告组
        addAdverList() {
            this.$refs.adverRef.dialogVisible = true;
            this.$refs.adverRef.tableData = this.viewForm.adverData;
            this.$refs.adverRef.userData = this.viewForm.userData;
        },
        getAdverData(data) {
            this.viewForm.adverData = data;
            if (this.viewForm.adverData.length > 0 || this.viewForm.userData.length > 0) {
                this.viewForm.is_adver = true;
            }else{
                this.viewForm.is_adver = false;
            }
            this.setSessionStorage();
        },

        getUserData(data) {
            this.viewForm.userData = data;
            if (this.viewForm.adverData.length > 0 || this.viewForm.userData.length > 0) {
                this.viewForm.is_adver = true;
            }else{
                this.viewForm.is_adver = false;
            }
            this.setSessionStorage();
        },

        // 添加规则组
        addRulesList() {
            this.$refs.rulesRef.dialogVisible = true;
            this.$refs.rulesRef.tableData = this.viewForm.rulesDta;
        },
        getRulesData(data) {
            this.viewForm.rulesDta = data;
            if (this.viewForm.rulesDta.length > 0) {
                this.viewForm.is_rules = true;
            }
            this.setSessionStorage();
        },

        // 添加触发规则
        addTriggerRules() {
            this.$refs.triggerRef.dialogVisible = true;
            this.$refs.triggerRef.addRuleGroupForm = JSON.parse(JSON.stringify(this.viewForm.triggerData))
            this.$refs.triggerRef.rulesList = this.viewForm.rulesDta;
            console.log(this.viewForm.triggerData);
            console.log(this.$refs.triggerRef.addRuleGroupForm);
        },
        getTriggerData(data) {
            this.viewForm.triggerData = data;
            this.viewForm.is_trigger = true;
            this.setSessionStorage();
        },

        // 预览规则
        viewStrategy() {
            this.$refs.viewRef.dialogVisible = true;
            this.$refs.viewRef.viewForm = this.viewForm;
            this.$refs.viewRef.viewForm = this.submitDataForm.segmentation_type;
        },

        // 提交保存
        submitForm(formName) {
            let flag =
                this.viewForm.is_adver &&
                this.viewForm.is_rules &&
                this.viewForm.is_trigger;
            if (!flag) {
                this.$message.error("请完善信息！");
                return;
            }
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let userArr = []
                    this.viewForm.userData.forEach(item=>{
                        userArr.push({
                            id:item.advertiser_id,
                            type:item.type
                        })
                    })
                    this.submitDataForm.campaign_group_id = this.viewForm.adverData.map(item=>{
                        return item.id
                    })
                    this.submitDataForm.advertiser_id = userArr
                    this.submitDataForm.rule_group_id = this.viewForm.rulesDta
                    this.submitDataForm.use_rule = this.viewForm.triggerData
                    this.loading = true
                    
                    const { data: res } = await this.$http.post(
                        "autodrop/configure/templateAdd",
                        this.submitDataForm
                    );
                    if (res.code == 202) {
                        this.$message.error(res.msg);
                        const attr = {
                            dialogVsb: true,
                            data: res.data,
                        };
                        this.$bus.emit("occupyPlan", attr);
                        this.loading = false;
                        return;
                    } else if (res.code == 203) {
                        this.$message.error(res.msg);
                        this.$refs.occuserRef.dialogVisible = true
                        this.$refs.occuserRef.tableData = res.data
                        this.loading = false;
                        return;
                    } else if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$router.push({
                            path: '/strategylist',
                        });
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                        this.loading = false;
                        window.sessionStorage.removeItem("strategySesstion");
                    }
                } else {
                    return false;
                }
            });
        },

        setSessionStorage() {
            window.sessionStorage.setItem(
                "strategySesstion",
                JSON.stringify(this.viewForm)
            );
        },
    },
    components: {
        AddAdverList,
        AddRulesList,
        AddTriggerRules,
        ViewStrategy,
        OccupyPlan,
        OccupyUser,
    },
};
</script>


<style scoped>
.step_box {
    width: 340px;
    height: 180px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 24px;
}
.step_header {
    height: 56px;
    border-bottom: 1px solid #ebebeb;
}
.step_num {
    font-size: 16px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    background: rgba(165, 177, 209, 0.08);
    font-family: "DINPro";
    color: #616c85;
}
.step_status {
    width: 52px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    border-radius: 2px;
}
.step_status.gray {
    background: rgba(165, 177, 209, 0.08);
    color: #616c85;
}
.step_status.green {
    background: rgba(0, 194, 113, 0.05);
    color: #00c271;
}
.step_content {
    text-align: center;
    margin-top: 16px;
}
.step_text {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
}
.step_tips {
    font-size: 14px;
    color: #b4b7bd;
    margin-top: 4px;
}
.step_btn {
    border: 0;
    background: rgba(165, 177, 209, 0.08);
    margin-top: 16px;
    width: 120px;
}

.step_icon {
    margin: 0 15px;
}
.str_input {
    margin-top: 16px;
    text-align: center;
}
.str_button {
    width: 340px;
    margin-left: 0;
    margin-top: 16px;
}
</style>

<style>
.str_input .el-input__inner {
    text-align: center;
}
.step_btn.el-button--primary.is-plain:focus, .step_btn.el-button--primary.is-plain:hover{
    color: #4475ff;
    background: rgba(165, 177, 209, 0.2);
}
</style>


